<template>
  <div class="enterprise-modal">
    <h4 class="mb-20">产业标记</h4>
    <CheckboxGroup v-model="industryChecked" @on-change="onChangeChecked">
      <Checkbox class="mb-20" :label="it.industryName" v-for="(it, i) in industryAssignsList" :key="i"></Checkbox>
    </CheckboxGroup>
    <Form :label-width="110" label-position="left">
      <FormItem label="指派目标企业">{{ tips }}</FormItem>
      <FormItem :label="item.industryName" v-for="item in busiIndustryAssignList" :key="item.industryId">
        <Row :gutter="10" align="middle" v-for="(it, i) in item.busiIndustryCompanyList" :key="it.uniqueId">
          <Col class="mb-10" style="width:500px">
            <Select
              v-model="it.companyId"
              filterable
              clearable
              label-in-value
              placeholder="请输入企业名称"
              @on-change="onSelectCompany($event,i,item.industryId)"
            >
              <Option
                v-for="(option, index) in item.options"
                :value="option.companyId"
                :key="index"
              >{{option.companyName}}</Option>
            </Select>
          </Col>
          <Row align="middle">
            <div
              class="icon"
              @click="onAdd(item.industryId)"
              v-if="i === item.busiIndustryCompanyList.length - 1 && i < 2"
            >
              <Icon type="md-add-circle" size="26" color="#2d8cf0" />
              <span>添加</span>
            </div>
            <div class="icon" @click="onDel(item.industryId, i)" v-if="item.busiIndustryCompanyList.length > 1 || i">
              <Icon type="md-close-circle" size="26" color="#ed4014" />
              <span>删除</span>
            </div>
          </Row>
        </Row>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { getDictTreeByParentId } from '@/api/system.js'
import { uniqueId } from 'lodash';
import { getCompanySelectByCompanyServiceTypeId } from '@/api/businessInformationManage.js'

export default {
  name: 'enterpriseModal',
  props: {
    tips: {
      type: String,
      default: ''
    },
    busiInfoId: {
      type: String,
      default: ''
    },
    initData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    initData: {
      handler (val) {
        if (val && val.length) {
          setTimeout(() => {
            this.init(val)
          }, 200)
        }
      }
    }
  },
  data () {
    return {
      industryChecked: [],
      // 所有的产业标记列表
      industryAssignsList: [],
      // 选中的产业标记列表
      busiIndustryAssignList: [],
    }
  },
  created () {
    this.getDict()
  },
  methods: {
    async getDict () {
      const res = await getDictTreeByParentId({ parentId: 'COMPANY_SERVICE' })
      this.industryAssignsList = res.map(it => {
        return {
          industryId: it.dictId,
          industryName: it.name,
          busiIndustryCompanyList: [{ uniqueId: uniqueId(), companyId: '', companyName: '' }],
          options: []
        }
      })
    },
    async init (arr) {
      this.busiIndustryAssignList = arr
      this.industryChecked = arr.map(it => it.industryName)

      arr.forEach(item => {
        this.industryAssignsList.forEach(async it => {
          if (it.industryId !== item.industryId) return
          if (item.busiIndustryCompanyList && item.busiIndustryCompanyList.length) {
            it.busiIndustryCompanyList = item.busiIndustryCompanyList
          }
          it.busiInfoId = item.busiInfoId
          const options = await getCompanySelectByCompanyServiceTypeId({ companyServiceTypeId: it.industryId })
          it.options = options
        })
      })

      this.updateIndustryCheckedList()
    },
    onSelectCompany (item, index, industryId) {
      this.industryAssignsList.some(it => {
        if (it.industryId === industryId) {
          it.busiIndustryCompanyList[index].companyId = item ? item.value : ''
          it.busiIndustryCompanyList[index].companyName = item ? item.label : ''
          return true
        }
      })
      this.updateIndustryCheckedList()
    },
    onChangeChecked () {
      this.industryAssignsList.forEach(async (it) => {
        if (this.industryChecked.includes(it.industryName) && !it.options.length) {
          it.options = await getCompanySelectByCompanyServiceTypeId({ companyServiceTypeId: it.industryId })
        }
      })
      this.updateIndustryCheckedList()
    },
    onAdd (industryId) {
      this.industryAssignsList.some(it => {
        if (it.industryId === industryId) {
          it.busiIndustryCompanyList.push({ uniqueId: uniqueId(), companyId: '', busiInfoId: this.busiInfoId })
          return true
        }
      })
      this.updateIndustryCheckedList()

    },
    onDel (industryId, i) {
      this.industryAssignsList.some(it => {
        if (it.industryId === industryId) {
          it.busiIndustryCompanyList.splice(i, 1)
          return true
        }
      })
      this.updateIndustryCheckedList()
    },
    updateIndustryCheckedList () {
      this.busiIndustryAssignList = this.industryAssignsList.filter(it => this.industryChecked.includes(it.industryName))
    },
    getData () {
      return this.busiIndustryAssignList.map(item => {
        const { busiIndustryCompanyList, industryId, industryName } = item
        return {
          busiIndustryCompanyList: busiIndustryCompanyList.filter(it => it.companyId),
          industryId,
          industryName,
          busiInfoId: this.busiInfoId
        }
      })
    },
    reset () {
      this.industryChecked = []
      this.busiIndustryAssignList = []
      this.industryAssignsList = this.industryAssignsList.map(it => {
        return {
          industryId: it.industryId,
          industryName: it.industryName,
          busiIndustryCompanyList: [{ uniqueId: uniqueId(), companyId: '', companyName: '' }],
          options: []
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
.enterprise-modal {
  .mb-20 {
    margin-bottom: 20px;
  }
  .icon {
    display: flex;
    align-items: center;
    margin-top: -7px;
    cursor: pointer;
  }

  .mb-10 {
    margin-bottom: 10px;
  }
}
</style>
<style lang='less'>
.enterprise-modal .icon {
  .ivu-icon {
    cursor: pointer;
  }
}
</style>
